<template>
	<!-- container -->
	<view class=" " v-if="order.order_id">
		<view class="header header_lan" :style="'padding-top: ' + navH + 'px;'">
			<view class="header_height" :style="'height:' + gaodu + 'px;line-height:' + gaodu + 'px;top:' + gaodutops + 'px;'">
				<view class="index_h_cont3">
					<view class="index_wenben_img" @tap="jumpzuo"><image :src="imgUrl + '/dzx_img22.png'" mode="widthFix"></image></view>
					<view class="index_wenben baise">{{ $t('page_indexs_dairuku.check_the_details') }}</view>
				</view>
			</view>
			<view class="coloe_title">s</view>
		</view>
		<scroll-view :scroll-y="true" >
			<!-- 顶部状态栏 -->
			<view class="detail-header dis-flex flex-y-center" :style="'padding-top:' + (navH + 50) + 'px;'">
				<view class="header-backdrop" :style="'top:' + (navH + 50) + 'px;'"><image src="/static/images/refund-bg.png"></image></view>
				<view class="header-state f-32 col-f">
					<text>{{ order.state_text }}</text>
				</view>
			</view>

			<!-- 快递配送：配送地址 -->
			<view v-if="order.delivery_type.value == DeliveryTypeEnum.EXPRESS.value" class="flow-delivery">
				<view class="flow-delivery__detail dis-flex flex-y-center">
					<view class="detail-location dis-flex"><text class="iconfont icon-dingwei"></text></view>
					<view class="detail-content flex-box">
						<view class="detail-content__title dis-flex">
							<text class="f-30">{{ order.address.name }}</text>
							<text class="detail-content__title-phone f-28">{{ order.address.phone }}</text>
						</view>
						<view class="detail-content__describe">
							<text class="col-7">
								{{ order.address.region.province }} {{ order.address.region.city }} {{ order.address.region.region }} {{ order.address.detail }}
							</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 上门自提：自提门店 -->
			<view v-if="order.delivery_type.value == DeliveryTypeEnum.EXTRACT.value" class="m-top20 b-f">
				<view class="flow-delivery">
					<view class="flow-delivery__title m-top20">
						<text class="flow-delivery__title-text f-30">{{ $t('page_detail.Pick_up_store') }}</text>
						<text class="f-24 col-8">{{ $t('page_detail.You_point') }}</text>
					</view>
					<view class="flow-delivery__detail dis-flex flex-y-center" @tap.stop.prevent="onTargetShop" :data-id="order.extract_shop.shop_id">
						<view class="detail-location dis-flex"><text class="iconfont icon-dingwei"></text></view>
						<view class="detail-content flex-box">
							<view class="detail-content__title dis-flex">
								<text class="f-30">{{ order.extract_shop.shop_name }}</text>
							</view>
							<view class="detail-content__describe">
								<text class="col-7">
									{{ order.extract_shop.region.province }} {{ order.extract_shop.region.city }} {{ order.extract_shop.region.region }}
									{{ order.extract_shop.address }}
								</text>
							</view>
						</view>
						<view class="detail-arrow dis-flex"><text class="iconfont icon-xiangyoujiantou user-orderJtou"></text></view>
					</view>
				</view>
			</view>

			<!-- 物流信息 -->
			<view class="flow-all-money b-f padding-box m-top20" v-if="order.delivery_type.value == DeliveryTypeEnum.EXPRESS.value && order.delivery_status.value == 20">
				<view class="flow-all-list dis-flex">
					<text class="">{{ $t('page_detail.Logistics_information') }}</text>
				</view>
				<navigator class="dis-flex" hover-class="none" :url="'./express/express?order_id=' + order.order_id">
					<view class="flex-box">
						<view class="dis-flex flow-all-list-cont">
							<text class="col-7">{{ $t('page_detail.Logistics_company') }}{{ order.express.express_name }}</text>
						</view>
						<view class="dis-flex flow-all-list-cont">
							<text class="col-7" :selectable="true">{{ $t('page_detail.Logistics_tracking_number') }}{{ order.express_no }}</text>
						</view>
					</view>
					<view class="flow-arrow dis-flex"><text class="iconfont icon-xiangyoujiantou user-orderJtou"></text></view>
				</navigator>
			</view>

			<!-- 标题：商品列表 -->
			<view class="flow-all-money b-f padding-box m-top20">
				<view class="flow-all-list dis-flex">
					<text class="">{{ $t('page_detail.Commodity_list') }}</text>
				</view>
				<view class="order-cont dis-flex">
					<view class="order-num">
						<text :selectable="true">{{ $t('page_detail.order_number') }}{{ order.order_no }}</text>
					</view>
					<view class="order-time">
						<text>{{ order.create_time }}</text>
					</view>
				</view>
			</view>

			<!-- 商品详情 -->
			<view class="checkout_list padding-box b-f">
				<view @tap.stop.prevent="onTargetGoods" class="flow-shopList dis-flex b-f" :data-id="item.goods_id" v-for="(item, index) in order.goods" :key="index">
					<view class="flow-list-left"><image mode="scaleToFill" :src="item.image.file_path"></image></view>

					<view class="flow-list-right flex-box">
						<!-- 商品名称 -->
						<text class="f-30 col-3 twolist-hidden">{{ item.goods_name }}</text>
						<!-- 商品sku信息 -->
						<text class="f-24 col-7">{{ item.goods_attr }}</text>
						<!-- 商品数量和单价 -->
						<view class="flow-list-cont dis-flex flex-x-between flex-y-center">
							<text class="small">×{{ item.total_num }}</text>
							<text :class="'flow-cont ' + (item.is_user_grade ? 'price-delete' : '')">{{ price_mode.unit }}{{ item.goods_price }}</text>
						</view>
						<!-- 会员折扣价 -->
						<view v-if="item.is_user_grade" class="grade-price">
							<text>{{ $t('page_detail.Discount_members') }}{{ price_mode.unit }}{{ item.grade_goods_price }}</text>
						</view>
						<!-- 申请售后 -->
						<view class="m-top20 dis-flex flex-x-end">
							<text v-if="item.refund" class="f-26 col-7">{{ $t('page_detail.Applied_after_sale') }}</text>
							<view v-else-if="order.isAllowRefund" class="btn-default" @tap.stop.prevent="onApplyRefund" :data-id="item.order_goods_id">
								{{ $t('page_detail.Apply_after_sales_service') }}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="flow-num-box b-f">
				<text>共{{ order.goods.length }}{{ $t('page_detail.Item_total') }}</text>
				<text class="flow-money col-m">{{ price_mode.unit }}{{ order.total_price }}</text>
			</view>

			<!-- 买家留言 -->
			<view class="flow-all-money b-f m-top20" v-if="order.buyer_remark.length">
				<view class="dis-flex flow-all-list">
					<text class="flex-five">{{ $t('page_detail.Buyers_message') }}</text>
				</view>
				<view class="dis-flex flow-all-list-cont" style="padding: 15rpx 0">
					<text class="col-7">{{ order.buyer_remark }}</text>
				</view>
			</view>

			<!-- 订单金额 -->
			<view class="flow-all-money b-f padding-box m-top20">
				<view class="dis-flex flow-all-list">
					<text class="flex-five">{{ $t('page_detail.Order_amount') }}</text>
				</view>
				<view class="dis-flex flow-all-list-cont">
					<text class="flex-five col-7">{{ $t('page_detail.Amount_goods') }}</text>
					<text class="flex-five col-m t-r">{{ price_mode.unit }}{{ order.total_price }}</text>
				</view>
				<view v-if="order.coupon_id > 0" class="dis-flex flow-all-list-cont">
					<text class="flex-five col-7">{{ $t('page_detail.Coupon_deduction') }}</text>
					<text class="flex-five col-m t-r">-{{ price_mode.unit }}{{ order.coupon_money }}</text>
				</view>
				<view v-if="order.points_num > 0" class="dis-flex flow-all-list-cont">
					<text class="flex-five col-7">{{ setting.points_name }}{{ $t('page_detail.deduction') }}</text>
					<text class="flex-five col-m t-r">-{{ price_mode.unit }}{{ order.points_money }}</text>
				</view>
				<view class="dis-flex flow-all-list-cont">
					<text class="flex-five col-7">{{ $t('page_detail.Delivery_cost') }}</text>
					<text class="flex-five col-m t-r">+{{ price_mode.unit }}{{ order.express_price }}</text>
				</view>
				<view class="dis-flex flow-all-list-cont" v-if="order.update_price.value != '0.00'">
					<text class="flex-five col-7">{{ $t('page_detail.Back_office_price_change') }}</text>
					<text class="flex-five col-m t-r">{{ order.update_price.symbol }}{{ price_mode.unit }}{{ order.update_price.value }}</text>
				</view>
				<view class="dis-flex flow-all-list-cont">
					<text class="flex-five col-7">{{ $t('page_detail.Actual_amount_paid') }}</text>
					<text class="flex-five col-m t-r">{{ price_mode.unit }}{{ order.pay_price }}</text>
				</view>
			</view>
		</scroll-view>

		<!-- 操作栏 -->
		<view v-if="order.order_status.value != 20" class="flow-fixed-footer b-f">
			<view class="dis-flex checkout-box" v-if="order.pay_status.value == 10">
				<!-- 取消订单 -->
				<view @tap.stop.prevent="cancelOrder" class="flex-box checkout-left-detail t-c">{{ $t('page_detail.Cancel_order') }}</view>
				<!-- 订单付款 -->
				<view class="flex-box checkout-right-detail">
					<text @tap.stop.prevent="onPayOrder" class="flow-btn" v-if="order.pay_status.value == 10">{{ $t('page_detail.Go_to_pay') }}</text>
				</view>
			</view>
			<!-- 确认收货 -->
			<view class="flow-btn h3" v-if="order.delivery_status.value == 20 && order.receipt_status.value == 10">
				<view @tap.stop.prevent="receipt">{{ $t('page_detail.Confirm_receipt_of_goods') }}</view>
			</view>
		</view>

		<!-- 支付方式弹窗 -->
		<zan-popup :show="showPayPopup" @close="onTogglePayPopup">
			<view class="pop-orderPay pop-example__container">
				<view class="pop-title">
					<text class="f-30">{{ $t('page_detail.Please_select_a_payment_method') }}</text>
				</view>
				<view class="pop-content">
					<view class="pay-method">
						<form @submit="onSelectPayType" :data-value="PayTypeEnum.WECHAT.value" :report-submit="true">
							<button formType="submit" class="btn-normal">
								<view class="pay-item dis-flex flex-x-between">
									<view class="item-left dis-flex flex-y-center">
										<view class="item-left_icon wechat"><text class="iconfont icon-weixinzhifu"></text></view>
										<view class="item-left_text">
											<text>{{ PayTypeEnum.WECHAT.name }}</text>
										</view>
									</view>
								</view>
							</button>
						</form>
						<form @submit="onSelectPayType" :data-value="PayTypeEnum.BALANCE.value" :report-submit="true">
							<button formType="submit" class="btn-normal">
								<view class="pay-item dis-flex flex-x-between">
									<view class="item-left dis-flex flex-y-center">
										<view class="item-left_icon balance"><text class="iconfont icon-qiandai"></text></view>
										<view class="item-left_text">
											<text>{{ PayTypeEnum.BALANCE.name }}</text>
										</view>
									</view>
								</view>
							</button>
						</form>
					</view>
				</view>
			</view>
		</zan-popup>

		<!-- 快捷导航 -->
		<!-- <shortcut bottom="120rpx"></shortcut> -->
	</view>
</template>

<script>
import zanPopup from '@/components/popup/index';
// import shortcut from '@/components/shortcut/shortcut';
const app = getApp(); // 枚举类：发货方式

import DeliveryTypeEnum from '../../utils/enum/DeliveryType.js'; // 枚举类：支付方式

import PayTypeEnum from '../../utils/enum/order/PayType';
export default {
	components: {
		zanPopup,
		// shortcut
	},
	data() {
		return {
			// 配送方式
			DeliveryTypeEnum,
			price_mode: uni.getStorageSync('price_mode'),
			// 支付方式
			PayTypeEnum,

			order_id: null,
			navH: app.globalData.navHeight,
			gaodu: app.globalData.height,
			gaodutops: app.globalData.top,
			imgUrl: app.globalData.imgUrl,

			order: {
				order_id: '',
				state_text: '',

				delivery_type: {
					value: ''
				},

				address: {
					name: '',
					phone: '',

					region: {
						province: '',
						city: '',
						region: ''
					},

					detail: ''
				},

				extract_shop: {
					shop_id: '',
					shop_name: '',

					region: {
						province: '',
						city: '',
						region: ''
					},

					address: ''
				},

				delivery_status: {
					value: 0
				},

				express: {
					express_name: ''
				},

				express_no: '',
				order_no: '',
				create_time: '',
				goods: [],
				isAllowRefund: '',
				total_price: '',

				buyer_remark: {
					length: ''
				},

				coupon_id: 0,
				coupon_money: '',
				points_num: 0,
				points_money: '',
				express_price: '',

				update_price: {
					value: '',
					symbol: ''
				},

				pay_price: '',

				order_status: {
					value: 0
				},

				pay_status: {
					value: 0
				},

				receipt_status: {
					value: 0
				}
			},

			showPayPopup: false,
			value: '',

			setting: {
				points_name: ''
			},

			name: ''
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad(options) {
		let _this = this;

		_this.order_id = options.order_id; // 获取订单详情

		_this.getOrderDetail(options.order_id);
	},
	methods: {
		jumpzuo() {
			uni.navigateBack();
		},
		/**
		 * 获取订单详情
		 */
		getOrderDetail(order_id) {
			let _this = this;

			app.globalData._get(
				'user.order/detail',
				{
					order_id
				},
				result => {
					_this.setData(result.data);
				}
			);
		},

		/**
		 * 跳转到商品详情
		 */
		onTargetGoods(e) {
			let goods_id = e.currentTarget.dataset.id;
			uni.navigateTo({
				url: '../goods/index?goods_id=' + goods_id
			});
		},

		/**
		 * 取消订单
		 */
		cancelOrder(e) {
			let _this = this;

			let order_id = _this.order_id;
			uni.showModal({
				title: '提示',
				content: '确认取消订单？',

				success(o) {
					if (o.confirm) {
						app.globalData._post_form(
							'user.order/cancel',
							{
								order_id
							},
							result => {
								uni.navigateBack();
							}
						);
					}
				}
			});
		},

		/**
		 * 确认收货
		 */
		receipt(e) {
			let _this = this;

			let order_id = _this.order_id;
			uni.showModal({
				title: '提示',
				content: '确认收到商品？',

				success(o) {
					if (o.confirm) {
						app.globalData._post_form(
							'user.order/receipt',
							{
								order_id
							},
							result => {
								_this.getOrderDetail(order_id);
							}
						);
					}
				}
			});
		},

		/**
		 * 申请售后
		 */
		onApplyRefund(e) {
			uni.navigateTo({
				url: './refund/apply/apply?order_goods_id=' + e.currentTarget.dataset.id
			});
		},

		/**
		 * 跳转到门店详情
		 */
		onTargetShop(e) {
			uni.navigateTo({
				url: '../shop/detail/index?shop_id=' + e.currentTarget.dataset.id
			});
		},

		/**
		 * 点击付款按钮
		 */
		onPayOrder(e) {
			let _this = this; // 显示支付方式弹窗

			_this.onTogglePayPopup();
		},

		/**
		 * 选择支付方式
		 */
		onSelectPayType(e) {
			let _this = this; // 记录formId

			app.globalData.saveFormId(e.detail.formId); // 隐藏支付方式弹窗

			_this.onTogglePayPopup();

			if (!_this.showPayPopup) {
				// 发起付款请求
				_this.payment(e.currentTarget.dataset.value);
			}
		},

		/**
		 * 显示/隐藏支付方式弹窗
		 */
		onTogglePayPopup() {
			this.showPayPopup= !this.showPayPopup
		},

		/**
		 * 发起付款请求
		 */
		payment(payType) {
			let _this = this;

			let orderId = _this.order_id; // 显示loading
			uni.showLoading({
				title: '正在处理...'
			});

			app.globalData._post_form(
				'user.order/pay',
				{
					order_id: orderId,
					payType
				},
				result => {
					if (result.code === -10) {
						app.globalData.showError(result.msg);
						return false;
					} // 发起微信支付

					if (result.data.pay_type == PayTypeEnum.WECHAT.value) {
						app.globalData.wxPayment({
							payment: result.data.payment,

							success() {
								_this.getOrderDetail(orderId);
							},

							fail() {
								app.globalData.showError(result.msg.error);
							}
						});
					} // 余额支付

					if (result.data.pay_type == PayTypeEnum.BALANCE.value) {
						app.globalData.showSuccess(result.msg.success, () => {
							_this.getOrderDetail(orderId);
						});
					}
				},
				null,
				() => {
					uni.hideLoading();
				}
			);
		}
	}
};
</script>
<style>
@import './detail.css';
</style>
